<template>
  <view class="store-list" :class="themeName">
    <!-- Location -->
    <!-- #ifndef APP-PLUS -->
    <map
      v-if="location.latitude"
      style="width: 750rpx; height: 400rpx"
      show-location
      :latitude="location.latitude"
      :longitude="location.longitude"
      :markers="markers"
    />
    <!-- #endif -->
    <!-- Store List -->
    <view class="store">
      <mescroll-uni
        :fixed="false"
        ref="mescrollRef"
        :down="{ auto: false }"
        :up="{
          noMoreSize: 5,
          auto: false,
          empty: {
            icon: '/static/images/empty/shop.png',
            tip: '暂无门店~',
            fixed: true,
          },
        }"
        @init="mescrollInit"
        @down="downCallback"
        @up="upCallback"
      >
        <view class="p-20">
          <view
            class="store-item bg-white flex"
            v-for="(item, index) in lists"
            :key="index"
            @click="onSelect(item)"
          >
            <!-- Info -->
            <view class="flex-1">
              <view class="m-b-20">
                <text class="bold lg black">{{ item.name }}</text>
                <text class="muted xs m-l-10">{{ item.distance }}</text>
              </view>
              <view class="black xs m-b-20 flex">
                <u-icon class="md m-r-10" name="map" />
                <text>{{ item.detailed_address }}</text>
              </view>
              <view class="black xs flex">
                <u-icon class="md m-r-10" name="clock" />
                <text
                  >{{ item.business_start_time }} -
                  {{ item.business_end_time }}</text
                >
              </view>
            </view>
            <!-- Phone -->
            <view @click.stop="onCall(item.mobile)">
              <u-icon class="store-item-phone" name="phone-fill" />
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<script>
import { apiSelffetchStore } from "@/api/store";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";

export default {
  name: "StoreList",
  mixins: [MescrollMixin],

  data() {
    return {
      lists: [], // 商家列表
      location: {}, // 我的位置
      markers: [], // 店铺位置
    };
  },
  methods: {
    // 上拉加载更多
    upCallback(page) {
      apiSelffetchStore({
        ...this.location,
        page_no: page.num,
        page_size: page.size,
      })
        .then(({ lists, page_size, count }) => {
          if (page.num === 1) this.lists = [];
          this.lists = [...this.lists, ...lists];

          this.markers = lists.map((item) => ({
            id: item.id,
            latitude: item.latitude,
            longitude: item.longitude,
            iconPath: "../../static/images/icon_marker.png",
            width: 34,
            height: 34,
            callout: {
              content: item.name,
              padding: 5,
              borderRadius: 4,
              fontSize: 13,
              display: "ALWAYS",
            },
          }));
          this.mescroll.endSuccess(lists.length, count);
        })
        .catch((err) => {
          this.mescroll.endBySize();
        });
    },

    // 拨打电话
    onCall(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
      });
    },

    // 获取位置
    async getLocation() {
      const [error, data] = await uni.getLocation({
        // #ifdef MP
        type: "gcj02",
        // #endif
      });
      // #ifdef MP
      if (!data) return this.getAuthorize();
      // #endif
      // #ifdef APP-PLUS
      if (!data) {
        return this.$toast({
          title: "获取位置失败",
        });
      }
      // #endif
      return {
        latitude: data.latitude,
        longitude: data.longitude,
      };
    },

    // 位置授权
    async getAuthorize() {
      const [error, data] = await uni.showModal({
        title: "您已拒绝地理位置权限",
        content: "是否进入权限管理，调整授权？",
      });

      if (data.confirm) {
        const [error, data] = await uni.openSetting();
        if (data) this.getLocation();
      } else if (data.cancel) {
        this.$Router.back();
      }
    },

    // 选择门店
    onSelect(data) {
      uni.$emit("changeStore", data);
      this.$Router.back();
    },
  },

  async onLoad() {
    try {
      const data = await this.getLocation();
      // if (!data) throw new Error('位置获取失败')
      this.location = data;
      // 防止获取不到mescroll
      setTimeout(() => {
        this.mescroll.resetUpScroll();
      }, 200);
    } catch (err) {
      console.log(err);
      this.$toast({
        title: err.message,
      });
    }
  },
};
</script>

<style lang="scss">
page {
  padding: 0;
  margin: 0;
  height: 100%;
}

.store-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.store {
  flex: 1;
  min-height: 0;
  &-item {
    padding: 30rpx;
    border-radius: 14rpx;
    &:not(:last-of-type) {
      margin-bottom: 20rpx;
    }
    &-phone {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60rpx;
      height: 60rpx;
      margin-right: 10rpx;
      border: 1px solid $-color-black;
      border-radius: 50%;
    }
  }
}
</style>
